import React, { Component } from 'react';
import { Button, Form, Modal, Table, Popover, Popconfirm } from 'antd';
import { messages, removeArrayItemByKey } from 'share/common';
import 'styles/data-center/report-management/single-field-comp.scss';
const FormItem = Form.Item;
import Chooser from 'components/chooser';

@Form.create()

class SingleFieldCompOtherData extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      columns: [
        {
          title: messages('basic-10.key196')/*数据附表*/,
          dataIndex: 'slaveReportName',
          render: (text, record) => {
            if (!text) {
              return <span>-</span>
            }
            return (
              <Popover placement="topLeft" content={text}>
                <span>{text}</span>
              </Popover>
            )
          }
        },
        {
          title: messages('basic-10.key197')/*附表关联字段*/,
          dataIndex: 'slaveColumnDisplayName',
          render: (text, record) => {
            if (!text) {
              return <span>-</span>
            }
            return (
              <Popover placement="topLeft" content={text}>
                <span>{text}</span>
              </Popover>
            )
          }
        },
        {
          title: messages('basic-10.key198')/*主表关联字段*/,
          dataIndex: 'masterColumnDisplayName',
          render: (text, record) => {
            if (!text) {
              return <span>-</span>
            }
            return (
              <Popover placement="topLeft" content={text}>
                <span>{text}</span>
              </Popover>
            )
          }
        },
        {
          title: messages('common.operation')/*操作*/,
          key: "operation",
          width: 220,
          align: 'center',
          render: (text, record) => {
            return (
              <Popconfirm
                onConfirm={() => this.deleteSingle(record)}
                title={messages('common.confirm.delete')/*确定要删除吗？*/}>
                <a onClick={e => {
                  e.preventDefault();
                  e.stopPropagation()
                }}>
                  {messages('common.delete')/*删除*/}
                </a>
              </Popconfirm>
            )
          }
        }
      ],
      currentOtherReport: {}
    };
    this.key = 1;
    this.grid = null;
    this.index = 1000000;
  }

  componentDidMount() {
    const { onRef, value } = this.props;
    onRef && onRef(this);
    this.setValues(value)
  }

  deleteSingle = (record) => {
    let data = removeArrayItemByKey(this.state.list, record, 'id');
    this.setState({list: data}, this.onChange)
  }

  componentWillReceiveProps(nextProps) {
    this.setValues(nextProps.value);
  }

  setValues = value => {
    this.setState({list: value})
  }

  onChange = () => {
    const { onChange } = this.props;
    onChange && onChange(this.state.list);
  };

  addData = (value, index) => {
    const { list } = this.state;
    list[index].columnDisplayName = value.columnDisplayName.name;
    list[index].i18n.columnDisplayName = value.columnDisplayName.i18n;
    this.setState({list}, this.onChange)
  }

  openModal = () => {
    this.setState({visibleModal: true})
  }

  hideModal = () => {
    this.setState({visibleModal: false})
  }

  addNewSideForm = () => {
    const { list } = this.state;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        list.push({
          slaveReportId: values.slaveReportId[0].id,
          slaveReportName: values.slaveReportId[0].reportName,
          slaveColumnId: values.slaveColumnId[0].id,
          slaveColumnDisplayName: values.slaveColumnId[0].columnDisplayName,
          masterColumnId: values.masterColumnId[0].id,
          masterColumnDisplayName: values.masterColumnId[0].columnDisplayName
        })
        this.setState({visibleModal: false, list}, ()=>{
          this.props.form.resetFields();
        })
      }
    });
  }

  mainReportChange = (e) => {
    this.setState({currentOtherReport: e[0]});
  }

  render() {
    const { currentMainReport } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { list, visibleModal, columns, currentOtherReport } = this.state;
    const formLayout = {
      labelCol: {span: 5, offset: 2},
      wrapperCol: {span: 15}
    }
    return (
      <div className='single-field-component'>
        <FormItem required label={messages('basic-10.key196')/*数据附表*/}>
          <Button type={'primary'} onClick={this.openModal}>{messages('basic-10.key203')/*新增*/}</Button>
        </FormItem>
        <Table
          rowKey={'id'}
          columns={columns}
          dataSource={list}
          size="middle"
          bordered
        />
        <Modal
          title={messages('basic-10.key204')/*新增数据附表*/}
          visible={visibleModal}
          maskClosable={false}
          bodyStyle={{padding: '26px 0'}}
          onCancel={this.hideModal}
          onOk={this.addNewSideForm}
        >
          <Form className='new-form' onSubmit={this.saveSingle}>
            <FormItem {...formLayout} required label={messages('basic-10.key196')/*数据附表*/}>
              {getFieldDecorator('slaveReportId', {
                rules: [{
                  required: true,
                  message: messages('common.select')/*请选择*/
                }]
              })(
                <Chooser
                  type={'custom-data-source-list'}
                  // listExtraParams={{}}
                  labelKey='reportName'
                  valueKey='id'
                  onChange={this.mainReportChange}
                  showNumber={false}
                  single={true}
                />
              )
              }
            </FormItem>
            <FormItem {...formLayout} required label={messages('basic-10.key197')/*附表关联字段*/}>
              {getFieldDecorator('slaveColumnId', {
                rules: [{
                  required: true,
                  message: messages('common.select')/*请选择*/
                }]
              })(
                <Chooser
                  disabled={!(currentOtherReport && currentOtherReport.id)}
                  type={'data-modal-attributes'}
                  listExtraParams={{sourceReportIds: currentOtherReport && currentOtherReport.id}}
                  labelKey='columnDisplayName'
                  valueKey='id'
                  showNumber={false}
                  single={true}
                />
              )
              }
            </FormItem>

            <FormItem {...formLayout} required label={messages('basic-10.key198')/*主表关联字段*/}>
              {getFieldDecorator('masterColumnId', {
                rules: [{
                  required: true,
                  message: messages('common.select')/*请选择*/
                }]
              })(
                <Chooser
                  disabled={!(currentMainReport && currentMainReport.id)}
                  type={'data-modal-attributes'}
                  listExtraParams={{sourceReportIds: (currentMainReport && currentMainReport.id)}}
                  labelKey='columnDisplayName'
                  valueKey='id'
                  showNumber={false}
                  single={true}
                />
              )
              }
              {!(currentMainReport && currentMainReport.id) && <div>{messages('basic-10.key242')/*选择数据主表后，才能选择主表关联字段*/}</div>}
            </FormItem>
          </Form>
        </Modal>
      </div>
    );
  }
}

SingleFieldCompOtherData.propTypes = {};

export default SingleFieldCompOtherData;
